<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('Summernote富文本编辑器')" />
    <th:block th:include="include :: summernote-css" />
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: jasny-bootstrap-css" />

    <style>
        .iframe-body-sty{position: relative;height:600px;width: 850px;background-color: white;}
        .iframe-body-sty>#iframes{position: absolute;transform:scale(0.5);left: -550px;top: -170px;}
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="col-sm-12 search-collapse">
        <form id="form-property-add" enctype="multipart/form-data">
            <div class="select-list" style="display: flex;">
                <ul>
                    <li>
                        <input th:value="${details.id}" hidden name="id" id="id"/>
                    </li>
                    <li>
                        <input th:value="${details.createId}"   name="createId" id="createId" hidden="hidden">
                    </li>
                    <li>
                        <input th:if="${details.accessoryId!=null}" th:value="${details.accessoryId}" name="accessoryId" id="accessoryId" hidden/>
                        <input th:if="${details.accessoryId==null}" value="null" name="accessoryId" id="accessoryId" hidden/>
                    </li>
                    <li>
                        <input th:if="${details.accessoryPath!=null}" th:value="${details.accessoryPath}" name="accessoryPath" id="accessoryPath" hidden/>
                        <input th:if="${details.accessoryPath==null}" value="null" name="accessoryPath" id="accessoryPath" hidden/>
                    </li>
                    <li>
                        <span>实验名称：</span>
                        <input th:value="${details.experimentName}" name="experimentName"  id="experimentName" readonly=”readonly”/>
                    </li>
                    <li>
                        <p>课程名称：</p>
                        <input th:value="${details.courseName}"  name="courseName" id="courseName" readonly=”readonly”/>
                    </li>
                    <!--<li>
                        <p>在线实验：</p>
                        <input th:if="${details.webName !=null}" th:value="${details.webName}" name="webName" readonly=”readonly” id="webName"/>
                        <input th:if="${details.webName ==null}" th:value="没有在线实验" name="webName" readonly=”readonly”/>
                        <input th:if="${details.webInter !=null}" th:value="${details.webInter}" name="webInter" hidden/>
                    </li>-->
                    <li>
                        <p>实验类型：</p>
                        <!--<select name="experimentType" id="experimentType" th:with="type=${@dict.getType('web_type')}">
                            <option th:each="dict : ${type}"  th:text="${dict.dictLabel}" th:value="${dict.dictValue}" disabled="disabled"></option>
                        </select>-->
                        <input  name="experimentTypes" id="experimentTypes" th:value="${details.experimentTypes}" readonly=”readonly”/>
                       <!-- <select name="experimenttype">
                            <option th:selected="${details.experimentType}=='0'" value="虚拟仿真实验">虚拟仿真实验</option>
                            <option th:selected="${details.experimentType}=='1'" value="实物实验">实物实验</option>
                        </select>-->
                    </li>
                    <li>
                        <p>提交日期：</p>
                        <input th:value="${#dates.format(details.beginTime,'yyyy-MM-dd')}+'_'+${#dates.format(details.endTime,'yyyy-MM-dd')}"  name="date" readonly=”readonly”/>
                    </li>
                    <li>
                        <span>预约的实验室：</span>
                        <input type="text" th:value="${details.experimentMessage}" name="experimentMessage" id="experimentMessage" readonly=”readonly”/>
                    </li>
                    <!--时间-->
                    <div hidden="hidden">
                        <input type="text" th:value="${details.beginTime}" name="beginTime" id="beginTime">
                        <input type="text" th:value="${details.endTime}" name="endTime" id="endTime">
                    </div>
                    <li>
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="baocun()"><i class="fa fa-search"></i>&nbsp;保存</a>
                        <a class="btn btn-warning btn-rounded btn-sm" onclick="$.modal.reload()"><i class="fa fa-refresh"></i>&nbsp;取消</a>
                        <a class="btn btn-primary btn-rounded btn-sm" onclick="downloadFile()" ><i class="fa fa-search"></i>&nbsp;下载附件</a>
                    </li>
                </ul>
            </div>

            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5 style="position:relative;left:50%;">实验介绍</h5>
                            <input th:value="${details.introduce}" type="hidden" id="experimentIntroduce" name="introduce">
                        </div>
                        <div class="ibox-content no-padding">
                            <div class="summernote1">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins" th:hidden="${details.webName ==null?'true':'false'}">
                        <div class="ibox-title">
                            <h5 style="position:relative;left:50%;">在线实验 </h5>
                            <span style="float: right">若实验右下角点击全屏不能放大，请点击：<a class="btn btn-primary btn-rounded btn-sm" th:href="${details.webInter}" target="_blank"><i class="fa"></i>&nbsp;全屏</a></span>
                        </div>
                        <div  class="ibox-content no-padding" align="center">
                            <div class="iframe-body-sty" allowfullscreen='true'>
                                &lt;!&ndash;<Iframe th:if="${details.webInter !=null}" th:src="${details.webInter}" width='100%' height='900/16%' frameborder="no" border="0" style="border: none;display: block;margin: 0 auto;" id="iframs"></iframe>&ndash;&gt;
                               <iframe th:if="${details.webInter !=null}" th:src="${details.webInter}"  width="1920px" height="920px" id="iframes" allowfullscreen="true"
                                       webkitallowfullscreen="true" mozallowfullscreen="true" oallowfullscreen="true" msallowfullscreen="true"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->
            <div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5 style="position:relative;left:50%;">实验报格式</h5>
                            <input type="hidden" name="experimentShape" id="experimentShape" th:value="${details.experimentShape}">
                        </div>
                        <div class="ibox-content no-padding">
                            <div class="summernote2" height="500px">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--<div class="row">
                <div class="col-sm-12">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title" style="display: flex">
                            <h5 style="position:relative;left:50%;">教师批改</h5>
                            <p style="position:relative;left:84%;">得分：</p>
                            <input type="text" th:value="${details.score}" name="score" style="position:relative;left:84%;" disabled/>
                        </div>

                        <div class="ibox-content no-padding">
                            <div class="summernote3">
                            </div>
                        </div>
                    </div>
                </div>
            </div>-->

           <div>
                <div class="ibox-title">
                    <h5 style="position:relative;left:50%;">上传附件</h5>
                </div>
                <center><span th:hidden="${details.allow==2?'false':'true'}" style="font-size:20px">此实验老师不允许学生自己上传实验报告</span></center>
                <div class="fileinput fileinput-new input-group" data-provides="fileinput">
                    <div class="form-control" data-trigger="fileinput"><i class="glyphicon glyphicon-file fileinput-exists"></i> <span class="fileinput-filename"></span></div>
                    <span class="input-group-addon btn btn-white btn-file"><span class="fileinput-new">选择文件</span><span class="fileinput-exists">更改</span><input text="请上传.doc,.docx或者ppt" name="filePath" type="file" id="filePath" th:disabled="${details.allow==2?'true':'false'}"></span>
                    <a href="#" class="input-group-addon btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
                    <!--<a class="btn btn-primary btn-rounded btn-sm" onclick="uploadFile()"><i class="fa fa-search"></i>&nbsp;上传</a>-->
                </div>
            </div>
        </form>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: summernote-js" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: jasny-bootstrap-js" />
<script>


    window.onload=function(){
        var one = $("#experimentIntroduce").val();
        var two = $("#experimentShape").val();
        $('.summernote1').summernote('code', one);
        $('.summernote2').summernote('code', two);
    }


    var prefix = ctx + "buildexperiment";
    $(document).ready(function () {
        $('.summernote').summernote({
            lang: 'zh-CN'
        });
    });
    var edit = function () {
        $("#eg").addClass("no-padding");
        $('.click2edit').summernote({
            lang: 'zh-CN',
            focus: true
        });
    };
    var save = function () {
        $("#eg").removeClass("no-padding");
        var aHTML = $('.click2edit').summernote('code');
        $('.click2edit').summernote('destroy');
    };

    function pass(){
        var path=$("#path").val();
        $.modal.confirm("确认要下载吗?", function() {
            window.location.href = ctx + "common/download/resource/?resource=" + path;
        });
    }

    $('#datetimepicker-demo-1').datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    $('#datetimepicker-demo-2').datetimepicker({
        format: "yyyy-mm-dd",
        minView: "month",
        autoclose: true
    });
    $('.summernote1').summernote({
        placeholder: '请输入实验介绍',
        height : 192,
        lang : 'zh-CN',
        followingToolbar: false,
        /*callbacks: {
            onImageUpload: function(files, editor, $editable) {
                var formData = new FormData();
                formData.append("file", files[0]);
                $.ajax({
                    type: "POST",
                    url: ctx + "common/upload",
                    data: formData,
                    cache: false,
                    contentType: false,
                    processData: false,
                    dataType: 'json',
                    success: function(result) {
                        if (result.code == web_status.SUCCESS) {
                            //alert(result.url+","+result.fileName)
                            $('.summernote1').summernote('editor.insertImage', result.url, result.fileName);
                        } else {
                            $.modal.alertError(result.msg);
                        }
                    },
                    error: function(error) {
                        $.modal.alertWarning("图片上传失败。");
                    }
                });
            }
        }*/

        /*callbacks: {
            onImageUpload: function (files) {
                sendFile(files[0], this);
            }
        }*/
    });
    $('.summernote1').summernote('disable');
    $('.summernote2').summernote({
        placeholder: '请输入实验报格式',
        height : 500,
        lang : 'zh-CN',
        followingToolbar: false,
            callbacks: {
                onImageUpload: function(files, editor, $editable) {
                    var formData = new FormData();
                    formData.append("file", files[0]);
                    $.ajax({
                        type: "POST",
                        url: ctx + "common/upload",
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false,
                        dataType: 'json',
                        success: function(result) {
                            if (result.code == web_status.SUCCESS) {
                                //alert(result.url+","+result.fileName)
                                $('.summernote2').summernote('editor.insertImage', result.url, result.fileName);
                            } else {
                                $.modal.alertError(result.msg);
                            }
                        },
                        error: function(error) {
                            $.modal.alertWarning("图片上传失败。");
                        }
                    });
                }
        }
    });


    function baocun() {
        /**
         * 判断是否在时间范围内
         * @type {p.fn.init|jQuery|HTMLElement}
         */
         var beginTime=new Date($("#beginTime").val()).getTime()-28800000;
         var endTime = new Date($("#endTime").val()).getTime();
         var nowDate=new Date().getTime();
         console.log(beginTime + "  " +endTime + "  "+nowDate)
         if(nowDate<beginTime || nowDate>endTime){
             $.modal.msgError("当前时间已不在提交时间范围内")
         }else{
             var a=$(".summernote2").summernote('code');
             $("#experimentShape").val(a);
             //alert($("#experimentShape").val())
             submitHandler();
             if ($('#filePath')[0].files[0] != null) {
                 uploadFile();
             }
         }
    }

    var prefix = ctx + "website/myexment"
    function submitHandler() {
        if ($.validate.form()) {
            $.operate.save(prefix + "/add", $('#form-property-add').serialize());
        }
    }

    function uploadFile() {
        var formData = new FormData();
        var a=$('#form-property-add').serialize();
        if ($('#filePath')[0].files[0] == null) {
            $.modal.alertWarning("请先选择文件路径");
            return false;
        }
        formData.append('fileName', $("#fileName").val());
        formData.append('file', $('#filePath')[0].files[0]);
        formData.append('id',$('#id').val());
        $.ajax({
            url: prefix + "/upload",
            type: 'post',
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            dataType: "json",
            success: function(result) {
                $.operate.successCallback(result);
            }
        });
    }
    function downloadFile(){
        var value1=$("#accessoryId").val();
        var value2=$("#accessoryPath").val();
        $.modal.confirm("确认要下载吗?", function() {
            if((value1==null || value1== "null") &&(value2==null || value2=="null")){
                var result={"code":"500","msg":"没有附件"}
                //alert(result.msg)
                $.operate.successCallback(result);
            }else{
                if(( value2!="null")&&( value1!="null")){
                    var value=value2+","+value1;
                    window.location.href = ctx + "website/myexment/common/download/resource/?resource=" + value ;
                }else if(( value2!="null")&&( value1=="null")){
                    var value=value2+",";
                    window.location.href = ctx + "website/myexment/common/download/resource/?resource=" + value ;
                }else if(( value2=="null")&&(value1!="null")){
                    var value=value1
                    window.location.href = ctx + "website/myexment/common/download/resource/?resource=" + value ;
                }
            }
        });
    }
</script>
</body>
</html>
